<template>
	<view class="container">
		<view class="product u-flex u-flex-wrap" v-if="productList.length">
			<view class="li" v-for="(item,index) in productList" :key="item.id" @click="productClick(item)">
				<view class="li-img">
					<zero-lazy-load :height="280" imgMode='aspectFill' :image="item.cover_image"
						class="img"></zero-lazy-load>
				</view>
				<view class="text">{{item.name}}</view>
				<view class="label" v-if="item.label && item.label.length > 0">
					<view class="li-box" v-for="(val,k) in labelList(item.label)" :key="k">{{val}}</view>
				</view>
				<view class="footer u-flex-between">
					<view class="authentication" v-if="item.mod_type == 2 && enterprises_auth_apply != 1">
						￥认证可查看价格</view>
					<view class="li-price" v-else>
						<span class="price">
							<span class="price-icon">￥</span>
							<span class="price-text">{{item.minPriceSpec.price}}</span>
						</span>
						<image src="https://qn.mtj.cdydsy.com/user_client/new-images/news.png" class="new-img"
							v-if="item.source_type == 1 && item.mod_type == 1 && is_new_user === 1"></image>
						<span class="origin-price">￥{{item.minPriceSpec.original_price}}</span>
					</view>
					<view class="li-shop" v-if="item.source_type == 1"
						@click.stop="item.minPriceSpec.stock > 0?addShop(item):$showToast('抱歉，当前商品补货中')">
						<u-icon name="shopping-cart" color="#4B4B4B" size="24"></u-icon>
					</view>
					<view class="source" v-else>跨境</view>
				</view>
			</view>
		</view>
		<empty mode="full-screen" :show="productList.length == 0" text="暂无商品" top="100rpx" bottom="100rpx">
		</empty>
		<enterprisePop ref="enterprisePop">
		</enterprisePop>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	const shopPlugin = require('@/static/shopPlugin/api.js')
	export default {
		data() {
			return {
				isShopCart: true
			};
		},
		computed: {
			...mapState({
				enterprises_auth_apply: state => state.init.enterprises_auth_apply,
				productList: state => state.guessRecommend.productList,
				is_new_user: state => state.index.is_new_user,
			}),
			labelList() {
				return (labelArray) => {
					return labelArray.slice(0, 3);
				};
			}
		},
		methods: {
			// 添加购物车
			addShop(e) {
				if (!this.$isLogin()) {
					this.$navigateTo()
					return;
				}
				if (e.mod_type == 2 && this.enterprises_auth_apply != 1) {
					this.$refs.enterprisePop.reminderShow = true
					return;
				}
				if (this.isShopCart == false) return;
				this.isShopCart = false;
				this.$post("shopCart/addReduce", {
					product_type: 1, // 普通商品
					type: 1, // 加1
					product_id: e.id, // 商品id
					product_spec_id: e.minPriceSpec.id, // 规格id
				}).then(res => {
					this.isShopCart = true;
					this.$showToast(res.msg);
					if (res.code == 200) {
						// 更新购物车总数
						this.$store.commit('shopCart/setShopCartNumber', res.data.total);
						// 更新已购物车
						this.$store.commit('shopCart/setIsUpdate');
					}
				}).catch(ex => {
					this.isShopCart = true;
					this.$errorToast()
				});
			},
			productClick(item) {
				if (item.source_type == 2) {
					const id = item.yueyang_product_id
					shopPlugin.gotoProduct(id)
				} else {
					this.$navigateTo('/subPackages/product/product-detail?product_id=' + item.id)
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {

		.product {
			margin-top: 10rpx;
			gap: 10rpx;

			.li {
				width: 342rpx;
				padding: 22rpx 14rpx 22rpx 20rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
				border-radius: 12rpx;

				.li-img {
					position: relative;

					.shop-618 {
						width: 110rpx;
						height: 105rpx;
						display: block;
						position: absolute;
						top: 0;
						right: 0;
						z-index: 9;
					}

					.img {
						width: 308rpx;
						display: block;
					}

					.shop-bybt {
						width: 136rpx;
						height: 70rpx;
						display: block;
						position: absolute;
						bottom: 0;
						left: 0;
						z-index: 9;
					}
				}

				.text {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					padding-top: 40rpx;
				}

				.label {
					padding-top: 16rpx;
					line-height: 1;
					gap: 10rpx;
					display: flex;
					flex-wrap: wrap;

					.li-box {
						padding: 8rpx;
						box-sizing: border-box;
						background-color: #FFFFFF;
						border-radius: 2rpx;
						border: 1rpx solid #131313;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 16rpx;
						color: #131313;
					}
				}

				.footer {
					padding-top: 20rpx;

					.authentication {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 24rpx;
						color: #A7A7A7;
					}

					.li-price {
						flex-shrink: 0;

						.price {
							.price-icon {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 500;
								font-size: 20rpx;
								color: #1C1C1C;
							}

							.price-text {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 500;
								font-size: 32rpx;
								color: #1C1C1C;
							}
						}
					}


					.img-618 {
						width: 76rpx;
						height: 30rpx;
						display: inline-block;
						margin-left: 6rpx;
					}

					.new-img {
						width: 76rpx;
						height: 30rpx;
						display: inline-block;
						margin-left: 6rpx;
					}

					.origin-price {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 300;
						font-size: 20rpx;
						color: #A7A7A7;
						padding-left: 6rpx;
						text-decoration: line-through;
					}

					.source {
						line-height: 1;
						font-size: 20rpx;
						color: #FFFFFF;
						padding: 8rpx 12rpx;
						box-sizing: border-box;
						background-color: #131313;
						border-radius: 1rpx;
					}
				}
			}
		}
	}
</style>